<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<link rel="stylesheet" href="css/rest.css" />
	<link rel="stylesheet" href="css/style.css" />
	<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
	</head>
	<script>
$(function(){
	var x =10; var y =20;
	$("a.tooltip").mouseover(function(e){
		this.myTitle = this.title;
		this.title ="";
		var tooltip="<div id='tooltip'>"+this.myTitle+"</div>"
		$("body").append(tooltip);
		$("#tooltip")
		.css({"top":(e.pageY+y) + "px","left":(e.pageX+x)+"px"}).show("fast");
	}).mouseout(function(){
		this.title = this.myTitle;
		$("#tooltip").remove();
	})onmousemove(function(e){
		$("#tooltip").css({
			"top":(e.pageY+y)+"px",
			"left":(e.pageX+x)+"px"
		});
	});

})
	</script>
	<body>
		<!--<div class="tips">
			<li>
				<a href="img/abv.jpg" class="tooltip" title="apple">
				<img src="img/abv.jpg" />
				</a>
			</li>

		</div>-->
		<p><a href="#" class="tooltip" title="这是我的超链接提示1">提示1</a></p>
		<p><a href="#" class="tooltip" title="这是我的超链接提示2">提示2</a></p>
		<p><a href="#" title="这是自带提示1">提示1</a></p>
		<p><a href="#" title="这是自带提示2">提示1</a></p>
		
		
	</body>
</html>
